/*
 * @Author: sunday
 * @Date: 2020-07-14 16:19:29
 * @LastEditors: sunday
 * @LastEditTime: 2020-07-14 16:22:34
 * @Description: file content
 */ 
//杭州市地图图表
function chart_map_hangzhou(dom) {
    var uploadedDataURL = "./js/mapdata/hangzhou.json";
    var myChart = echarts.init(document.getElementById(dom));
    var data_map = [];
    var name = 'hangzhou';
    //标注线数组
    var line_data = [{
        name: "西湖区",
        coords: [
            [120.147376, 30.272934],
            [120.147376, 30.572994]
        ]
    }, {
        name: "江干区",
        coords: [
            [120.202633, 30.266603],
            [120.702633, 30.266603]
        ]
    }, {
        name: "下城区",
        coords: [
            [120.172763, 30.276271],
            [120.172763, 29.576271]
        ]
    }, {
        name: "滨江区",
        coords: [
            [120.21062, 30.206615],
            [120.51062, 29.806615]
        ]
    }, {
        name: "拱墅区",
        coords: [
            [120.150053, 30.314697],
            [120.350053, 29.714697]
        ]
    }]
    $.get(uploadedDataURL, function (geoJson) {
        console.log('geoJson', geoJson);

        for (key in geoJson.features) {
            var item_name = geoJson.features[key].properties.name;
            if (item_name == '西湖区' || item_name == '江干区' || item_name == '下城区' || item_name == '滨江区'|| item_name == '拱墅区') {
                data_map.push({
                    name: item_name,
                    value: S_mock.number(10, 800),
                    label: {
                        show: false
                    }
                })
            } else {
                data_map.push({
                    name: item_name,
                    value: S_mock.number(10, 800)
                })
            }

        }
        var max = 0;
        var min = 800;
        data_map.forEach(function (item) {
            max = item.value > max ? item.value : max;
            min = item.value < min ? item.value : min;
        });

        // 基于准备好的dom，初始化echarts实例
        echarts.registerMap(name, geoJson);

        // 指定图表的配置项和数据
        option = {
            visualMap: {
                show: false,
                min: min,
                max: max,
                right: '15%',
                bottom: '1%',
                itemWidth: 25,
                itemHeight: 100,
                text: ['高', '低'],
                realtime: false,
                calculable: true,
                textStyle: {
                    color: '#333',
                    fontSize: '14'
                },
                // inRange: {
                //   color: ['#0559AE', '#02EDFF']
                // }
            },
            tooltip: {
                trigger: 'item',
            },
            dataRange: {
                show: false,
                min: min,
                max: max,
                x: '5%',
                y: '80%',
                splitList: [{
                        start: 0,
                        end: 300,
                        label: '0-300',
                        color: '#FF7879'
                    },
                    {
                        start: 300,
                        end: 600,
                        label: '300-600',
                        color: '#5EF6A3'
                    },
                    {
                        start: 600,
                        end: max,
                        label: '>600',
                        color: '#FBD258'
                    },
                ],
                textStyle: { //图例文字颜色 字体大小
                    color: '#333',
                    fontSize: '14'
                },

            },
            //背景阴影
            geo: {
                show: true,
                map: name,
                label: {
                    show: false
                },
                top: 'center',
                left: 'center',
                // roam: false,
                // width: '85%',
                // height: '85%',
                zoom: 1,
                itemStyle: {
                    areaColor: '#3196fa',
                    borderColor: '#C8A676',
                    shadowColor: '#3196fa',
                    shadowBlur: 0,
                    borderWidth: 2,
                }
            },
            series: [{
                name: '杭州市',
                type: 'map',
                mapType: name,
                zoom: 1,
                left: 'center',
                label: {
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: '12'
                        },
                    },
                    emphasis: {
                        show: true,
                        textStyle: {
                            color: '#333',
                            fontSize: '12'
                        }
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: function (params) {
                        return params.name + "：" + params.value;
                    }
                },
                roam: false,
                itemStyle: {
                    normal: {
                        areaColor: 'rgba(7,157,233,0.4)',
                        borderColor: '#ddd',
                        // shadowColor: '#ccc',
                        // shadowBlur: 5,
                        // borderWidth: 2,
                    },
                    emphasis: {
                        areaColor: '#3093d8' //鼠标移入高亮颜色
                    }
                },
                data: data_map,
            }, { // 含引导线的省份，用lines实现
                type: 'lines',
                symbol: 'circle',
                symbolSize: [6, 4],
                label: {
                    show: true,
                    formatter: '{b}'
                },
                lineStyle: {
                    type: 'dotted',
                    shadowBlur: 3,
                },
                z: 2,
                data: line_data
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    })

}